﻿@page "/CropperTest"
@using Cropper.Blazor.Models;
@using Cropper.Blazor.Components

@inject IJSRuntime JS;

<h3>CropperTest</h3>

<link href="_content/Cropper.Blazor/cropper.min.css" rel="stylesheet" />
<script src="_content/Cropper.Blazor/cropper.min.js"></script>

<style>
    .big-img {
        max-height: 400px;
        /* This rule is very important, please don't ignore this */
        max-width: 400px;
        object-fit: fill !important; /* 拉伸填充 */
    }

    .img-container {
        max-height: 400px;
        width: 400px;
        object-fit: fill !important; /* 拉伸填充 */
    }

    .cropper-container .cropper-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: fill !important; /* 完全拉伸 */
        /* 或使用 object-fit: cover !important; 保持比例但填满 */
    }
</style>

@*<div Class="img-container" style="object-fit: fill !important; width: 400px; height: 400px; position: relative; overflow: hidden; ">
        <CropperComponent Class="big-img" @ref="CropperComponent"
                          Src="./images/6162f127bcad72e7309465ab688d13a5.jpeg" Options="CropperOptions" />
    </div>*@

@*<div style="object-fit: fill !important; width: 400px; height: 400px; position: relative; overflow: hidden; ">
    <img id="custom-cropper-image"
         src="./images/6162f127bcad72e7309465ab688d13a5.jpeg"
         style="width: 100%; height: 100%; object-fit: fill;" />
    <CropperComponent Src="./images/6162f127bcad72e7309465ab688d13a5.jpeg" Target="custom-cropper-image" @ref="CropperComponent" Options="CropperOptions" />
</div>*@

<div style="object-fit: fill !important; width: 400px; height: 400px; position: relative; overflow: hidden; ">
    <CropperComponent Src="./images/6162f127bcad72e7309465ab688d13a5.jpeg" @ref="CropperComponent" Options="CropperOptions" OnCropEndEvent="@CropEndEvent" />
</div>
<button @onclick="ViewModeChange" class="btn btn-primary mt-2">ViewMode</button>
<button @onclick="OpenDialog" class="btn btn-primary mt-2">OpenDialog</button>

<img id="custom-cropper-image" src="@CropImageUrl" />

@code {
    private string CropImageUrl { get; set; }

    protected override async Task OnInitializedAsync()
    {

    }

    [CascadingParameter] private Radzen.Dialog _dialog { get; set; }
    [Inject] private Radzen.DialogService _dialogService { get; set; }

    private async Task OpenDialog()
    {
        var result = await _dialogService.OpenAsync<CropperDialog>("截图",
            new Dictionary<string, object>() { { "ContainerBoxWidth", 600 }, { "ContainerBoxHeight", 600 }, { "ImageUrl", "./images/6162f127bcad72e7309465ab688d13a5.jpeg" } }, // 传递初始值
            new DialogOptions() { Width = "1000", Height = "1000" });
        // 处理返回结果
        if (result != null)
        {
            // 处理返回的数据
        }
    }

    private async Task ViewModeChange()
    {
        CropperOptions.ViewMode = ViewMode.Vm3;
        CropperComponent?.InitCropper();
        CropperComponent?.Destroy();
        CropperComponent?.InitCropper();
    }

    private async void CropEndEvent(Cropper.Blazor.Events.JSEventData<Cropper.Blazor.Events.CropEndEvent.CropEndEvent> arg)
    {
        ImageReceiver imageReceiver = await CropperComponent.GetCroppedCanvasDataInBackgroundAsync(new GetCroppedCanvasOptions() { MaxHeight = 4096, MaxWidth = 4096 });
        InvokeAsync(async () =>
        {
            using MemoryStream croppedCanvasDataStream = await imageReceiver.GetImageChunkStreamAsync();
            byte[] croppedCanvasData = croppedCanvasDataStream.ToArray();
            if (croppedCanvasData != null && croppedCanvasData.Length > 0)
            {
                CropImageUrl = "data:image/png;base64," + Convert.ToBase64String(croppedCanvasData);
                StateHasChanged();
            }
        });
    }

    private CropperComponent? CropperComponent = null!;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await Task.Delay(300); // 确保cropper初始化完成
                                   //await JS.InvokeVoidAsync("eval",
                                   //    "document.querySelector('.cropper-container img').style.cssText = 'width:100% !important; height:100% !important; object-fit:fill !important;'");
        }
    }

    // Setting up initial dimensions of crop area
    private Options CropperOptions = new Options
    {
        SetDataOptions = new SetDataOptions
        {
            Width = 400,
            Height = 400,
        },
        ViewMode = ViewMode.Vm3,

        AutoCropArea = 1, // 自动裁剪区域设为100%
        Responsive = true,
        Restore = false,
        CheckCrossOrigin = false
    };

    decimal _cropBoxWidth = 400;
    decimal _cropBoxHeight = 400;

    private decimal CropBoxWidth
    {
        get => _cropBoxWidth;
        set
        {
            _cropBoxWidth = value;
            CropperComponent!.SetData(new SetDataOptions
            {
                Width = _cropBoxWidth,
                Height = _cropBoxHeight
            });
            StateHasChanged();
        }
    }

    private decimal CropBoxHeight
    {
        get => _cropBoxHeight;
        set
        {
            _cropBoxHeight = value;
            CropperComponent!.SetData(new SetDataOptions
            {
                Width = _cropBoxWidth,
                Height = _cropBoxHeight
            });
            StateHasChanged();
        }
    }
}
